<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-1.11.0.js"></script>
		<style>
			ul>li{
				list-style-type: none;
				font-size: 20px;
				margin-top: 5px;
				text-align: center;
			}
			ul{
				display: block;
				width: 200px;
				margin: 100px auto;
			}
		</style>
		<script>
			$(function(){
				$("ul>li").mouseover(function(){
					$(this).css({"background-color":"red"});
				}).mouseout(function(){
					$("ul>li").css({"background-color":""});
				}).click(function(){
					$(this).prevAll().css({"background-color":"yellow"}).end().nextAll().css({"background-color":"blue"});
				})
			})
		</script>
	</head>
	<body>
		<ul>
			<li>大娃力大无穷</li>
			<li>二娃耳聪目明</li>
			<li>三娃精钢不坏</li>
			<li>四娃火神降临</li>
			<li>五娃翻江倒海</li>
			<li>六娃无影无踪</li>
			<li>七娃紫金葫芦</li>
		</ul>
	</body>
</html>
